<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue学习/vue.js"></script>
</head>

<body>
    <!-- #### 插槽

            组件的插槽

            ·组件的插槽也是为了让我们封装的组件更加具有扩展性。

            ·让使用者可以决定组件内部的一些内容到底展示什么。

            **组件内的元素可以通过外界指定** -->
    <div id="app">
        <!-- <cpn>
            <p>父组件通过指定的内容去替换子组件中的插槽</p>
            <span>替换匿名插槽的内容</span>
        </cpn> -->
        <cpn>
            <!-- p标签替换匿名插槽中的内容 -->
            <p>父组件通过指定的内容去替换子组件中的插槽（匿名插槽）</p>
            <span slot="s2">替换具名插槽的内容</span>
        </cpn>
    </div>
    <!-- 定义 -->
    <template id="t1">
                <div>
                  <h5>各个组件通用的内容</h5>
                  <!-- 匿名插槽 -->
                  <slot>
                    <h5>插槽中可替换部分（不替换则为默认内容）</h5>
                  </slot>
                  <h5>各个组件通用的内容</h5>
                  <!-- 具名插槽 -->
                  <slot name="s2">
                    <h5>插槽中可替换部分（不替换则为默认内容）</h5>
                  </slot>
                </div>
              </template>

    <script>
        // 注册
        Vue.component("cpn", {
            template: "#t1"
        })
        new Vue({
            el: "#app"
        });
    </script>
</body>

</html>